<template>
  <ActionPanel>
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="名称">{{ name }}【{{statTypeOptions[data.type]}}】</ElDescriptionsItem>
      <ElDescriptionsItem label="标签">
        <el-input v-model="data.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="seedName" label="申明">
        <DeclareEditor :seed-name="seedName" v-model="data.declare" style="min-width: 100px;" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="seedName" label="条件" :span="column">
        <SearchesEditor v-model="data.searches" :seed-name="seedName" :key="seedName" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释" :span="column">
        <el-input type="textarea" v-model="data.comment" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template v-if="close" #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElDescriptions, ElDescriptionsItem, ElButton } from 'element-plus'
  import { getAction, getSeed } from '@/views/seed-dev'
  import { computed, inject, ref, watch } from 'vue';
  import { StatConfiguration } from '@/views/dev-types';
  import { DeclareEditor } from '../../DeclarsEditor';
  import { SearchesEditor } from '../../SearchesEditor';
  import { statTypeOptions } from '..';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';

  const props = defineProps<{seedName?: string, actionName?: string, statName: string}>()
  const seedName = computed(() => {
    if(props.seedName) return props.seedName

    const action = getAction(props.actionName)
    return action.seedName
  })
  const column = 3

  const close = inject<() => void>(closePopupKey, void 0)
  function getInitData() {
    if(props.seedName) {
      const seed = getSeed(props.seedName)
      if(props.actionName) {
        return seed.actions[props.actionName].stats?.[props.statName] || {}
      } else {
        return seed.stats?.[props.statName] || {}
      }
    } else {
      const action = getAction(props.actionName)
      return action.stats?.[props.statName] || {}
    }
  }

  const name = ref<string>(props.statName)
  const data = ref<StatConfiguration>(getInitData())

  function doSave() {
    if(props.seedName) {
      const seed = getSeed(props.seedName)
      if(props.actionName) {
        const action = seed.actions?.[props.actionName]
        action.stats = action.stats || {}
        action.stats[name.value] = data.value
      } else {
        seed.stats = seed.stats || {}
        seed.stats[name.value] = data.value
      }
    } else {
      const action = getAction(props.actionName)
      action.stats = action.stats || {}
      action.stats[name.value] = data.value
    }
    
    close?.()
  }

  watch([() => props.seedName, () => props.actionName, () => props.statName], () => {
    name.value = props.statName
    data.value = getInitData()
  })
</script>
<style lang="less" scoped>
  :deep(td.is-bordered-label) {
    width: 80px;
  }
</style>